{extend name="base" /}
{block name="body"}
<div class="layui-card">
    <div class="layui-card-body">
        <form action="{:request()->url()}" class="layui-form" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">菜单标题</label>
                <div class="layui-input-inline">
                    <input value="{$data.name|default=''}" name="name" class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item" id="type_radio">
                <label class="layui-form-label">菜单类型:</label>
                <div class="layui-input-inline" style="display: block;width: auto;float: none;">
                    <input type="radio" name="type" value="click" title="发送消息" lay-filter="type_select" lay-verify="required" {if isset($data) and $data.type == 'click'}checked{/if}>
                    <input type="radio" name="type" value="view" title="跳转链接" lay-filter="type_select" lay-verify="required" {if isset($data) and $data.type == 'view'}checked{/if}>
                    <input type="radio" name="type" value="miniprogram" title="跳转小程序" lay-filter="type_select" lay-verify="required"  {if isset($data) and $data.type == 'miniprogram'}checked{/if}>
                </div>
            </div>
            <!--发送消息-->
            <div id="type_click">
                <div class="layui-form-item">
                    <label class="layui-form-label">回复关键字</label>
                    <div class="layui-input-block">
                        <select name="key" lay-search>
                            <option value="">请选择关键字</option>
                            {foreach name=":\app\wechat\model\WechatReply::get_lists();" item="v"}
                            <option value="{$v.keyword}" {if condition="isset($data) and $data.key eq $v.keyword"}selected="selected"{/if}>{$v.keyword}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
            </div>
            <!--跳转小程序-->
            <div id="type_miniprogram">
                <div class="layui-form-item">
                    <label class="layui-form-label">APPID</label>
                    <div class="layui-input-block">
                        <input value="{$data.appid|default=''}" name="appid" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">小程序路径</label>
                    <div class="layui-input-block">
                        <input value="{$data.pagepath|default=''}" name="pagepath" placeholder="/pages/index/index" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
            </div>
            <!--跳转链接-->
            <div id="type_view">
                <div class="layui-form-item">
                    <label class="layui-form-label">跳转地址</label>
                    <div class="layui-input-block">
                        <input value="{$data.url|default=''}" name="url" placeholder="" class="layui-input" autocomplete="off"/>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="i" lay-submit="">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}
{block name="js"}
<script>
    //类型选择
    {if isset($data) and $data.type == 'view'}
        $("#type_view").show();
        $("#type_click").hide();
        $("#type_miniprogram").hide(); 
    {elseif isset($data) and $data.type == 'click'}
        $("#type_view").hide();
        $("#type_click").show();
        $("#type_miniprogram").hide(); 
    {elseif isset($data) and $data.type == 'miniprogram'}
        $("#type_view").show();
        $("#type_click").hide();
        $("#type_miniprogram").show(); 
    {else}
        $("#type_view").hide();
        $("#type_miniprogram").hide(); 
    {/if}
        
    {if isset($data) and $data.sub_button == '1'}
        $("#type_radio").hide();
        $("#type_view").hide();
        $("#type_click").hide();
        $("#type_miniprogram").hide(); 
    {/if}
    form.on('radio(type_select)', function(data){
        //console.log(data); //是否被选中，true或者false
        if(data.value=='view'){
            $("#type_view").show();
            $("#type_click").hide();
            $("#type_miniprogram").hide();
        }else if(data.value=='click'){
            $("#type_view").hide();
            $("#type_click").show();
            $("#type_miniprogram").hide();
        }else{
            $("#type_view").show();
            $("#type_click").hide();
            $("#type_miniprogram").show();
        }
    });    
    
</script>
{/block}